<template>
  <div class="main">
    <div class="main-body">
      <div
        class="main-table-header d-flex justify-content-end align-items-center"
      >
        <el-button
          class="main-table-header-button"
          type="primary"
          style="background-color:#0066F9;"
          @click="addExamine"
        >
          <i class="el-examine"></i>
          新建审批</el-button
        >
      </div>
      <el-table
        v-loading="loading"
        id="examine-table"
        :data="list"
        :height="tableHeight"
        class="main-table"
        highlight-current-row
        style="width: 100%"
      >
        <template v-for="(item, index) in fieldList">
          <el-table-column
            v-if="item.prop"
            :key="index"
            :formatter="fieldFormatter"
            :prop="item.prop"
            :label="item.label"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column
            v-else
            :key="item.slot"
            :prop="item.slot"
            :label="item.label"
            show-overflow-tooltip
            align="center"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                active-color="#0066F9"
                inactive-color="#999"
                :active-value="1"
                :inactive-value="2"
                @change="handleClick('change', scope)"
              >
              </el-switch>
            </template>
            <!-- <div slot-scope="scope">
              <el-button
                v-if="item.slot === 'status'"
                type="text"
                size="small"
                @click="handleClick('change', scope)"
                >{{ scope.row["status"] === 2 ? "启用" : "停用" }}</el-button
              >
            </div> -->
          </el-table-column>
        </template>

        <el-table-column fixed="right" label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleClick('edit', scope)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handleClick('delete', scope)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="p-contianer">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          :total="total"
          class="p-bar"
          background
          layout="prev, pager, next, sizes, total, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- <business-approve-flow-create
      v-if="createShow"
      :detail="rowDetail"
      :is-copy="isCopyCreate"
      @success="getList"
      @close="createShow = false"
    /> -->

    <!-- 审批流升级提醒 -->
    <!-- <approval-flow-update-dialog /> -->
  </div>
</template>

<script>
import {
  examinesQueryListAPI,
  examinesUpdateStatusAPI,
  deleteExamineCc
} from "@/api/examine";

import BusinessApproveFlowCreate from "./Create";
import XrHeader from "@/components/XrHeader";
import ApprovalFlowUpdateDialog from "@/components/ApprovalFlow/ApprovalFlowUpdateDialog";

export default {
  // 系统管理 的 审核管理
  name: "SystemExamine",
  components: {
    XrHeader,
    BusinessApproveFlowCreate,
    ApprovalFlowUpdateDialog
  },
  mixins: [],
  data() {
    return {
      loading: false, // 加载动画
      tableHeight: document.documentElement.clientHeight - 200, // 表的高度
      list: [],
      fieldList: [
        {
          prop: "examineName",
          label: "审批流名称",
          width: 150
        },
        {
          prop: "label",
          label: "审批业务",
          width: 150
        },
        {
          slot: "status",
          label: "状态",
          width: 100
        },
        {
          prop: "updateUserName",
          label: "创建人",
          width: 150
        },
        {
          prop: "recheckType",
          label: "流程说明",
          width: 150
        },
        {
          prop: "updateTime",
          label: "创建时间",
          width: 150
        }
      ],
      currentPage: 1,
      pageSize: 20,
      pageSizes: [10, 20, 30, 40],
      total: 0,
      labelList: [
        { name: "合同", value: 1 },
        { name: "回款", value: 2 },
        { name: "发票", value: 3 },
        { name: "薪资", value: 4 },
        { name: "采购审批", value: 5 },
        { name: "采购退货审批", value: 6 },
        { name: "销售审批", value: 7 },
        { name: "销售退货审批", value: 8 },
        { name: "付款审批", value: 9 },
        { name: "回款审批", value: 10 },
        { name: "盘点审批", value: 11 },
        { name: "调拨审批", value: 12 },
        { name: "退款", value: 13 }
      ],
      rowDetail: null,
      isCopyCreate: false,
      createShow: false
    };
  },
  computed: {},
  mounted() {
    window.onresize = () => {
      this.tableHeight = document.documentElement.clientHeight - 200;
    };
    this.getList();
  },
  methods: {
    /**
     * 获取列表数据
     */
    getList() {
      this.loading = true;
      examinesQueryListAPI({
        page: this.currentPage,
        limit: this.pageSize
      })
        .then(res => {
          this.list = res.data.list;

          this.total = res.data.totalRow;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },

    /**
     * 格式化字段
     */
    fieldFormatter(row, column) {
      // 如果需要格式化
      // 1 固定审批 2 授权审批
      if (column.property === "label") {
        const findRes = this.labelList.find(o => o.value === row.label);
        return findRes ? findRes.name : "--";
      } else if (column.property === "userList") {
        const structures = row["deptList"] || [];
        let strName = structures
          .map(item => {
            return item.name;
          })
          .join("、");

        const users = row["userList"] || [];
        const userName = users
          .map(item => {
            return item.realname;
          })
          .join("、");

        if (strName && userName) {
          strName += "、";
        }
        const name = strName + userName;
        return name || "全公司";
        // status    1 正常 2 停用 3 删除
      } else if (column.property === "status") {
        if (row[column.property] === 2) {
          return "停用";
        }
        return "启用";
      } else if (column.property === "recheckType") {
        return {
          1: "返回审批流初始层级",
          2: "跳过审批流已通过的层级，返回拒绝的层级"
        }[row[column.property]];
      }
      return row[column.property];
    },

    /**
     *  添加审批流
     */
    addExamine() {
      // this.isCopyCreate = false;
      // this.rowDetail = null;
      // this.createShow = true;
      this.$router.push({
        name: "examineCreate",
        params: {
          type: "create",
          examineId: 0
        }
      });
    },

    /**
     * 更改每页展示数量
     */
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },

    /**
     * 更改当前页数
     */
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    handleClick(type, scope) {
      if (type === "edit") {
        // this.isCopyCreate = false;
        // this.rowDetail = scope.row;
        const param = {
          examineName: scope.row.examineName,
          label: scope.row.label,
          managerList: scope.row.managerList,
          remarks: scope.row.remarks
        };
        localStorage.setItem("examine_detail", JSON.stringify(param));
        this.$router.push({
          name: "examineEdit",
          params: {
            type: "edit",
            examineId: scope.row.examineId
          }
        });
        // this.createShow = true;
      } else if (type === "delete") {
        // 启用停用
        this.$confirm("您确定要删除该审批流?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            examinesUpdateStatusAPI({
              examineId: scope.row["examineId"],
              status: 3
            })
              .then(res => {
                this.list.splice(scope.$index, 1);
                if (this.list.length === 0) {
                  this.currentPage =
                    this.currentPage - 1 > 0 ? this.currentPage - 1 : 1;
                }
                this.getList();
                this.$message({
                  type: "success",
                  message: "操作成功"
                });
              })
              .catch(() => {});
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      } else if (type === "change") {
        console.log();
        // 启用停用
        this.$confirm(
          "您确定要" +
            (scope.row["status"] === 1 ? "启用" : "停用") +
            "该审批流?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(() => {
            examinesUpdateStatusAPI({
              examineId: scope.row["examineId"],
              status: scope.row["status"]
            })
              .then(res => {
                this.$message({
                  type: "success",
                  message: "操作成功"
                });
                this.getList();
              })
              .catch(() => {});
          })
          .catch(() => {
            scope.row["status"] = scope.row["status"] === 1 ? 2 : 1;
            this.$message({
              type: "info",
              message: "取消操作"
            });
          });
      } else if (type === "copy") {
        this.isCopyCreate = true;
        this.rowDetail = scope.row;
        this.createShow = true;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;

  /deep/ .xr-header {
    padding: 15px 30px;
  }
}

.main-body {
  background-color: white;
  border-top: 1px solid $xr-border-line-color;
  border-bottom: 1px solid $xr-border-line-color;
}

.main-table-header {
  height: 50px;
  background-color: white;
  position: relative;
  padding: 0 16px;
  .main-table-header-button {
  }
}

.p-contianer {
  position: relative;
  background-color: white;
  height: 44px;
  .p-bar {
    float: right;
    margin: 5px 100px 0 0;
    font-size: 14px !important;
  }
}

::v-deep .el-examine {
  display: inline-block;
  background: url("../../../assets/img/crm/examine.png") center no-repeat;
  background-size: cover;
  width: 16px;
  height: 16px;
}
::v-deep .el-examine:before {
  content: "1";
  color: transparent;
}
::v-deep .el-table {
  th.el-table__cell.is-leaf {
    border: none;
    .cell {
      color: #999;
    }
  }
}
::v-deep .el-table__cell {
  text-align: center !important;
}
</style>
